<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            .c-icon-move{
                display: inline-block;
                width: 70px;
                height: 80px;
                cursor: pointer;
                margin-left: 20px;
                margin-top: 100px;
            }
            .icon-fav-box{background:url('anim-fav.png');}
            .icon-coin-box{background:url(anim-coin.png);}
            .icon-video-box{background:url('anim-wait.png')}
        </style>
    </head>
    <body>
    <b class="c-icon-move icon-fav-box"></b>
    <b class="c-icon-move icon-coin-box"></b>
    <b class="c-icon-move icon-video-box"></b>
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    var $b1=$('.icon-fav-box')
    var $b2=$('.icon-coin-box')
    var $b3=$('.icon-video-box')
        var animation=function(timeID,step,that,peak){
            this.timeID=timeID;
            this.step=step;
            this.that=that;
            this.peak=peak;
        }
        animation.prototype.startInterval=function(){
            var backgroundx=0;

            var _this=this;
            this.timeID=setInterval(function(){
                $(_this.that).css('background-position-x','-'+backgroundx+'px');
                backgroundx+=_this.step;
                if(backgroundx==_this.peak){
                    console.log('====')
                    backgroundx=0;
                }

                _this.backgroundx=backgroundx
                console.log(_this.backgroundx)
            },100)
        }
        animation.prototype.endInterval=function(backgroundx){
            clearInterval(this.timeID);
           var _this=this;
           var timeEndId;
           _this.timeEndId=timeEndId
           // console.log(backgroundx)
            timeEndId=setInterval(function(){
               if(backgroundx==0){
                    clearInterval(timeEndId)
                    $(_this.that).css('background-position-x',0+'px');
                    return;
                }
                backgroundx+=_this.step;
                 // $(_this.that).css('background-position-x',backgroundx+'px');
                if(backgroundx==0){
                    clearInterval(timeEndId)
                }
                // console.log(backgroundx)
                $(_this.that).css('background-position-x',backgroundx+'px');
            },100)
        }
        
        animation.prototype.start=function(){
            var _this=this;
            this.that.mouseover(function(){
               _this.startInterval()
            })
        }
        animation.prototype.end=function(){
             var _this=this;
            this.that.mouseout(function(){
                // console.log(((_this.backgroundx)*-1))
               _this.endInterval(((-_this.backgroundx)))
            })
        }
        var b1=new animation('time1',80,$b1,960)
        var b2=new animation('time2',80,$b2,560)
        var b3=new animation('time3',80,$b3,560)
        b1.start();
        b1.end();
        b2.start();
        b2.end();
        b3.start();

        b3.end()
        


//0 80 160 240 320 400 480 560
    
        // new  Promise((resolve,reject)=>{
        //     // setTimeout(()=>{
        //     var flag=true
        //         if(flag){
        //             resolve(123)
        //         }else{
        //             reject(456)
        //         }
        //     // },2000)
        // }).then((res)=>{
        //     console.log(res)
        //     return new Promise((resolve,reject)=>{
        //         resolve(4234)
        //     })
        // }).catch((err)=>{
        //     console.log(err)
        // }).then((res)=>{
        //     console.log(res)
        // })
        // console.log(1234)
        // console.log(12345)

    </script>
    </body>
</html> 